<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <style type="text/css">
        .content {
            display: flex;
            flex-wrap: wrap;
        }

        #safeTop .van-button__content .van-button__icon {
            color: #323233;
        }

        .van-input-div {
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .van-input {
            /* background-color: red; */
            width: 46%;
        }

        .van-input_input {
            width: 400px;
            /* padding: 20px; */
        }

        .bottomBtn {
            width: 100%;
            margin: 10px 50px 4px 50px;
            display: flex;
            justify-content: space-between;
        }

        .van-button {
            margin: auto 10px;
            width: 100%;
        }

        .outter {
            /* width: 100px; */
            background-color: red;
            display: flex;
        }

        .fieldInner {
            width: 85%;
            /* padding: 10px; */
            margin: auto;
            border: 1px solid rgba(0, 0, 0, 0.1);
            color: #323233;
        }

        .van-radio-group {
            display: flex;
        }

        .van-radio-group .van-radio {
            flex: 1;
        }

        .Operator {
            width: 100%;
        }

        .van-tag {
            color: #0283ef;
            background: rgba(2, 131, 239, 0.1);
            margin-right: 3px;
            padding: 2px;
        }

        .van-radio_group {
            width: 82%;
            border: 1px solid red;
            /* background-color: red; */
        }

        .top_button {
            background-color: red;
            border: 1px solid red;
            color: #fff;
        }

        .content-R-inner>span {
            position: absolute;
            top: 6px;
            left: 6px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            z-index: 2000;
            background-color: #1989fa;
            color: #fff;
            text-align: center;
            line-height: 20px;
        }

        .content-R-inner {
            position: relative;
            padding: 25px 13px 5px 13px;
            box-sizing: border-box;
            border: 1px solid #EAEAF5;
        }

        .content-R-inner>.van-icon {
            position: absolute;
            top: 6px;
            right: 6px;
            z-index: 2000;
            color: red;
        }

        .content-R-inner .van-field .van-field__label {
            width: auto;
            padding: 0;
        }

        .content-R-inner .van-field .van-field__control {
            text-align: left;
        }

        .div_status {
            display: flex;
            align-items: center;
            padding-left: 15px;

        }

        .div_status>span {
            font-weight: 700;
            font-size: 18px;
        }

        .collapse-item-top {
            display: flex;
        }

        .collapse-item-top>.van-button {
            width: 8%;
            margin: auto 20px auto auto;
        }

        .number {
            text-align: center;
            margin-right: 8px;
            width: 1.5em;
            height: 1.5em;
            background-color: #1989fa;
            border-radius: 50%;
            color: #fff;
        }

        .van-col {
            padding: 20px;
        }

        .nav-barRight {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 8px;
            display: flex;
            align-items: center;
            /* margin: auto 8px auto auto; */
        }

        .field1 {
            width: 50%;
            border-right: 1px solid #333
        }

        .field2 {
            border-right: 1px solid #333;
            font-weight: 700;
            font-size: 18px;
        }

        .field3 {
            width: 25%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box" id="box">
            <div class="van-nav-bar" id="safeTop">
                <div class="van-nav-bar__content">
                    <div class="van-nav-bar__left" @click="onClickLeft">
                        <i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i>
                    </div>
                    <div class="van-nav-bar__title van-ellipsis">
                        {{name + '明细'}}
                    </div>
                    <div class="nav-barRight">
                        <van-button size="small" @click='add'>新增</van-button>
                        <van-button size="small" icon="scan" @click="openScan"
                            v-show="api.deviceModel != 'TC27' && api.deviceModel != 'rk3568_s' && api.deviceModel != 'ZC-328'">
                        </van-button>
                    </div>

                </div>
            </div>
            <div class="content">
                <van-field v-model="formData.ProductName" label="产品" placeholder="请选择产品" readonly is-link
                    @click="openBaseScreen('产品')"></van-field>
                </van-field>
                <van-field class='field1' v-model="formData.OperateDate" label="操作日期" placeholder="请选择操作日期" readonly
                    is-link @click="handlerDate('操作日期')"></van-field>

                <van-field class='field1' v-model="formData.WorkShopName" label="车间" placeholder="请填写车间" readonly>
                </van-field>

                <van-field class='field1' v-model="formData.CS" label="产线" placeholder="请填写产线" readonly is-link
                    @click="handlerCS">
                </van-field>

                <van-field style="width: 50%;" v-model="formData.TestResult" label="检验结果" placeholder="请填写检验结果" is-link
                    readonly @click="testResultShow = true"></van-field>

                <van-field class='field2' v-model="formData.Qty" type="digit" label="数量" placeholder="请输入数量">
                </van-field>
                <div style="background-color: #fff;width: 100%;">
                    <van-collapse v-model="activeNames">
                        <van-collapse-item v-for="(item, index) in tableData" :name="item.index">
                            <div slot="title">
                                <div class="collapse-item-top">
                                    <div class="number">
                                        <span>{{item.index}}</span>
                                    </div>
                                    <van-button size="mini" type="info" @click.stop='addSub(index)'>新增</van-button>
                                </div>

                                <van-field class='field3' v-model="item.Qty" label="确认数量：" placeholder="自动生成" readonly>
                                </van-field>
                                <van-field class='field3' v-model="item.OldQty" label="原始数量：" placeholder="自动生成"
                                    readonly>
                                </van-field>
                                <van-field class='field3' v-model="item.CreateTime" label="创建时间：" placeholder="自动生成"
                                    readonly>
                                </van-field>
                                <van-field class='field3' v-model="item.Creater" label="创建人：" placeholder="自动生成"
                                    readonly>
                                </van-field>
                            </div>
                            <van-row v-show='item.ztList'>
                                <van-col span="12" v-for="(it, ind) in item.ztList">
                                    <div class="content-R-inner">
                                        <span>{{ind + 1}}</span>
                                        <van-icon name="delete" @click="deleteItem(index, ind)"></van-icon>

                                        <div class="div_status"> <span>状态：</span>
                                            <van-radio-group v-model="it.status" style="font-weight: 800;width: 80%;"
                                                :disabled="item.Creater != APP.getUserInfo().UserName">
                                                <van-radio name="0">正常</van-radio>
                                                <van-radio name="-1">返修</van-radio>
                                                <van-radio name="-2">报废</van-radio>
                                            </van-radio-group>
                                        </div>
                                        <van-field v-model="it.Qty" label="确认数量:" placeholder="数量"
                                            :disabled="item.Creater != APP.getUserInfo().UserName"
                                            style="font-weight: 700;font-size: 18px;">
                                        </van-field>
                                    </div>
                                </van-col>
                            </van-row>
                        </van-collapse-item>
                    </van-collapse>
                </div>
                <div class="bottomBtn">
                    <van-button type="info" @click="confirm">保 &nbsp &nbsp &nbsp &nbsp &nbsp 存
                    </van-button>
                </div>
            </div>
            <audio id="audioPlayer" preload="auto">
                <source src="../image/aigei_com.mp3" type="audio/mpeg">
            </audio>
            <div class="indexBottom">
                汇智云创 技术支持
            </div>
        </div>
        <van-dialog v-model="passwordshow" title="请输入口令" show-cancel-button @confirm="handlerDialog"
            @cancel="passwordshow = false">
            <!--输入框-->
            <van-field v-model="message" rows="1" autosize label="口令：" type="password" placeholder="请输入口令" />
        </van-dialog>
        <van-popup v-model="dateShow" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" title="选择操作日期" @confirm="confirmDate"
                @cancel="dateShow = false"></van-datetime-picker>
        </van-popup>
        <van-action-sheet v-model="testResultShow" :actions="testResultActions" @select="onSelectTestResult">
        </van-action-sheet>
        <van-action-sheet v-model="CSShow" :actions="CSActions" @select="onSelectCS">
        </van-action-sheet>
        <van-action-sheet v-model="GBCJShow" :actions="GBCJActions" @select="onSelectGBCJ">
        </van-action-sheet>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        var demo = api.require('xGprinterTsc');
        var scanTC27 = api.require('scanTC27');
        var FNScanner = api.require('FNScanner');

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            console.log('ret', JSON.stringify(ret))
            if (ret.value.type == '产品') {
                vm.formData.ProductName = ret.value.row.name
                vm.formData.ProductID = ret.value.row.ProductID
                vm.formData.ProductCode = ret.value.row.ProductCode
            }
        })
        api.addEventListener({
            name: 'getCDAlarmLList'
        }, function (ret) {
            APP.getCDAlarmLList()
        })
        api.addEventListener({
            name: 'getYCKBDataLiist'
        }, function (ret) {
            APP.getYCKBDataLiist()
        })
        vm = new Vue({
            el: '#app',
            data: {
                activeNames: [],
                buttonshow: true,
                message: '',
                passwordshow: false,
                name: api.pageParam.name,
                formData: {
                    status: '0',
                    AssemblingID: 0,
                    ProductName: '',
                    ProductID: '',
                    ProductCode: '',
                    OperateDate: '',
                    Batch: APP.getFormatBatch(new Date()),
                    Qty: '',
                    OldQty: '',
                    WorkShopName: '17号车间',
                    TestResult: '',
                    up: '',
                    down: '',
                    Operator: '',
                    OperatorList: [],
                    CS: '',
                    KTN: '2',
                    shiw: '4'
                },
                pagewordshow: true,
                dateShow: false,
                currentDate: new Date(),
                currentDateStr: '',
                testResultShow: false,
                testResultActions: [
                    {
                        name: '合格',
                    },
                    {
                        name: '不合格',
                    },
                ],
                OperatorActions: [],
                OperatorShow: false,
                CSActions: [],
                CSShow: false,
                GBCJActions: [],
                GBCJShow: false,
                List: [],
                Copy: 1,
                Deleteshow: false,
                filteredArr: [],
                tableData: [
                    {
                        AssemblingDeID: 0,
                        index: '1',
                        Qty: '',
                        OldQty: '',
                        CreateTime: APP.getFormatDate(new Date()).split(' ')[0],
                        Creater: APP.getUserInfo().UserName,
                        ztList: [{
                            AssemblingDeDeID: 0,
                            status: '0',
                            Qty: '',
                        }],
                    }
                ],
            },
            created: function () {
                var that = this;
                window.localStorage.setItem('pageName', JSON.stringify(that.name))

                scanTC27.registerReceiver(function (ret, err) {
                    if (ret.barcode && ret.barcode.indexOf('ZP') != -1) {
                        that.formData.AssemblingID = ret.barcode.split('|')[1]
                        that.getData(that.formData.AssemblingID)
                    }
                })

                if (api.pageParam.AssemblingID) {
                    that.getData(api.pageParam.AssemblingID)
                } else {
                    that.formData.OperateDate = APP.getFormatDate(new Date()).split(' ')[0]
                    that.formData.TestResult = that.testResultActions[0].name
                }

            },
            mounted() {
                APP.setSafeTop()
                APP.keyBoardChange()
            },
            methods: {
                openScan() {
                    var that = this
                    var resultList = api.hasPermission({
                        list: ['camera']
                    });
                    if (resultList[0].granted) {
                        // 已授权，可以继续下一步操作
                        that.openFNScanner()
                    } else {
                        api.confirm({
                            msg: '应用需要您的授权才能访问相机',
                            buttons: ['取消', '去设置']
                        }, function (ret) {
                            if (ret.buttonIndex == 2) {
                                api.requestPermission({
                                    list: ['camera'],
                                }, function (res) {
                                    if (res.list[0].granted) {
                                        // 已授权，可以继续下一步操作
                                        that.openFNScanner()
                                    }
                                });
                            }
                        });
                    }
                },
                openFNScanner() {
                    var that = this
                    FNScanner.open({
                        autorotation: true
                    }, function (ret, err) {
                        if (ret) {
                            if (ret.content) {
                                // alert(ret.content)
                                console.log('')
                                that.formData.AssemblingID = ret.content.split('|')[1]
                                that.getData(that.formData.AssemblingID)
                            }
                        } else {
                            vm.$toast('扫描失败');
                        }
                    });
                },

                getData(AssemblingID) {
                    var that = this
                    APP.ajax('getTLRecordsDetail', { AssemblingID: AssemblingID }, function (res) {
                        console.log('res', JSON.stringify(res))
                        res.ds.map((item, index) => {
                            item.index = index + 1 + ''
                            item.OperateDate = item.OperateDate ? item.OperateDate.split('T')[0] : ''
                            item.CreateTime = item.CreateTime ? item.CreateTime.split('T')[0] : ''
                        })
                        that.formData = res.ds[0]
                        that.formData.Qty = res.ds[0].TotalQty
                        if (res.ds1) {
                            that.tableData = res.ds1
                        }
                        that.getztList()

                    })
                },
                getztList() {
                    var that = this
                    that.tableData.map((item) => {
                        var obj = {
                            AssemblingID: item.AssemblingID,
                            AssemblingDeID: item.AssemblingDeID
                        }
                        APP.ajax('getTLDeDetail', obj, function (res) {
                            console.log('480res', JSON.stringify(res))
                            res.ds.map((item) => {
                                item.status = item.Status + ''
                            })
                            item.ztList = res.ds
                        })
                    })
                },

                add() {
                    var that = this
                    var obj = {
                        AssemblingDeID: 0,
                        index: that.tableData.length + 1 + '',
                        Qty: '',
                        OldQty: '',
                        CreateTime: APP.getFormatDate(new Date()).split(' ')[0],
                        Creater: APP.getUserInfo().UserName,
                        ztList: [{
                            AssemblingDeDeID: 0,
                            status: '0',
                            Qty: '',
                        }],
                    }
                    that.tableData.push(obj)
                    vm.$forceUpdate()

                },
                addSub(index) {
                    var that = this
                    var obj = {
                        AssemblingDeDeID: 0,
                        status: '0',
                        Qty: '',
                    }
                    that.tableData[index].ztList.push(obj)
                    that.tableData = JSON.parse(JSON.stringify(that.tableData));
                    vm.$forceUpdate()
                },


                deleteItem(index, ind) {
                    var that = this
                    that.tableData[index].ztList.splice(ind, 1)
                    that.tableData = JSON.parse(JSON.stringify(that.tableData));
                    vm.$forceUpdate()

                },
                Delete() {
                    var that = this
                    that.passwordshow = true
                    that.Deleteshow = true
                },
                CopyAdd() {
                    var that = this
                    api.toast({
                        msg: '复制成功,请点击后进行保存'
                    })
                    that.Copy = 0
                },
                handlerDialog() {//确认or取消
                    var that = this
                    if (that.message == '') {
                        api.toast({
                            msg: '口令未输入'
                        })
                    } else {
                        var list = {
                            password: that.message
                        }
                        api.toast({
                            msg: '密码输入正确'
                        })
                        APP.ajax('getPassword', list, function (res) {
                            if (res.ds[0].status == 200) {
                                if (that.Deleteshow) {
                                    var obj = {
                                        AssemblingID: api.pageParam.AssemblingID
                                    }
                                    that.$dialog.confirm({
                                        title: '提示',
                                        message: '确定删除吗？',
                                    })
                                        .then(() => {
                                            APP.ajax('deleteAssemblingRecord', obj, function (res) {
                                                setTimeout(() => {
                                                    api.closeWin();
                                                    api.sendEvent({
                                                        name: 'refreshAssembleFormList',
                                                    });
                                                }, 1000);

                                            })
                                        })
                                        .catch(() => { })
                                } else {
                                    that.$dialog.confirm({
                                        title: '提示',
                                        message: '确认保存吗？',
                                    }).then(() => {
                                        var obj = {
                                            AssemblingID: api.pageParam.AssemblingID,
                                            ProductID: that.formData.ProductID,
                                            OperateDate: that.formData.OperateDate,
                                            Batch: that.formData.Batch,
                                            Qty: that.formData.Qty,
                                            ProductName: that.formData.ProductName,
                                            Operator: that.formData.OperatorList.map(item => item).join(','),
                                            WorkShopName: that.formData.WorkShopName,
                                            TestResult: that.formData.TestResult,
                                            TBDate: that.formData.up + ',' + that.formData.down,
                                            CS: that.formData.CS,
                                            KTN: that.formData.KTN == '1' ? 1 : 0,
                                            GBCJ: that.formData.GBCJ,
                                            status: that.formData.status,
                                        }
                                        APP.ajax('updateAssemblingRecords', obj, function (res) {
                                            if (res.ds[0].Column1) {
                                                that.formData.AssemblingID = res.ds[0].Column1
                                                api.toast({
                                                    msg: '提交成功！'
                                                })
                                                setTimeout(() => {
                                                    api.sendEvent({
                                                        name: 'refreshAssembleFormList'
                                                    })
                                                })
                                            }
                                        })
                                    })
                                        .catch(() => {
                                        })
                                }
                            }
                            else {
                                api.toast({
                                    msg: '密码输入错误！'
                                })
                                that.message = ''
                            }
                        })
                    }
                },
                handlerCS() {
                    var that = this
                    APP.ajax('getSCX', {}, function (res) {
                        that.CSActions = res.ds

                        that.CSShow = true
                    })
                },
                handlerDate(str) {
                    var that = this
                    that.currentDate = new Date()
                    that.currentDateStr = str
                    that.dateShow = true
                },

                onSelectCS(val) {
                    var that = this
                    that.formData.CS = val.name
                    that.CSShow = false
                },
                onSelectGBCJ(val) {
                    var that = this
                    that.formData.GBCJ = val.name
                    that.GBCJShow = false
                },
                onClickLeft() {
                    var that = this
                    api.closeWin()
                },
                confirmDate() {
                    var that = this
                    if (that.currentDateStr == '操作日期') {
                        that.formData.OperateDate = APP.getFormatDate(that.currentDate).split(' ')[0]
                    } else if (that.currentDateStr == '正') {
                        that.formData.up = APP.getFormatDate(that.currentDate).split(' ')[0]
                    } else if (that.currentDateStr == '负') {
                        that.formData.down = APP.getFormatDate(that.currentDate).split(' ')[0]
                    }
                    that.dateShow = false
                },
                onSelectTestResult(val) {
                    var that = this
                    that.formData.TestResult = val.name
                    that.testResultShow = false
                },
                confirm() {
                    var that = this
                    that.$dialog.confirm({
                        title: '提示',
                        message: '确认保存吗？',
                    })
                        .then(() => {
                            that.filteredArr = that.tableData.filter(function (item) {
                                return item.AssemblingDeID == 0;
                            });
                            let list = {
                                NewQty: that.filteredArr.map((item) => item.ztList.map(item => item.Qty).join(',')).join(','),
                                AssemblingDeID: that.filteredArr.map((item) => item.AssemblingDeID).join(','),
                                Status: that.filteredArr.map((item) => item.ztList.map(item => item.status).join(',')).join(','),
                                OldQty: that.formData.Qty,
                                AssemblingID: that.formData.AssemblingID,
                                AssemblingDeDeID: that.filteredArr.map((item) => item.ztList.map(item => item.AssemblingDeDeID).join(',')).join(','),
                            }

                            console.log('696list', JSON.stringify(list))
                            APP.ajax('saveTL', list, function (res) {
                                console.log('res', JSON.stringify(res))
                            })

                            setTimeout(() => {
                                api.closeWin();
                                api.sendEvent({
                                    name: 'refreshInferiorityList',
                                });
                            }, 1000);

                        })

                        .catch(() => { })

                },

                openBaseScreen: function (str) {
                    var that = this;
                    var obj;
                    if (str == '产品') {
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['name'],
                            isPaging: false,
                            type: str,
                            cmd: 'getProductList',
                            param: {}
                        }
                    }
                    api.openWin({
                        name: 'baseScreen',
                        url: 'tool/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: obj
                    })
                },

            }
        })
    };
</script>

</html>
